<template>
  <div class="ChinaCityMap">
    <div id="ChinaCityMapContent"></div>
  </div>
</template>

<script>
const chinaJson = require("../../utils/chinaCity.json");
export default {
  name: "ChinaCityMap",
  props: {},
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    initEchart() {
      const ChinaCityMapContent = document.getElementById(
        "ChinaCityMapContent"
      );
      ChinaCityMapContent.style.width = window.innerWidth + "px";
      const myChart = this.$echarts.init(ChinaCityMapContent);
      this.$echarts.registerMap("china", chinaJson);
      const option = {
        tooltip: {
          show: false
        },
        visualMap: {
          show: false //图注
        },
        geo: {
          map: "china", //引入地图数据
          roam: true, //开启缩放和平移
          zoom: 3, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              //高亮的显示设置
              areaColor: "skyblue", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        // 鼠标悬浮提示框
        series: [
          {
            name: "城市",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]
      };
      myChart.setOption(option);
      myChart.on("click", function(params) {
        console.log("%c Line:70 🍇 params", "color:#93c0a4", params);
      });
    }
  },
  mounted() {
    this.initEchart();
  }
};
</script>

<style lang="scss" scoped>
.ChinaCityMap {
  #ChinaCityMapContent {
    height: 750px;
    width: 1800px;
    margin: auto;
    background: #bdc9df;
  }
}
</style>
